<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      pc: `https://main.qcloudimg.com/raw/5fab9010c186cf701ac691e9321cf49e/pc.svg`,
      mobile: `https://main.qcloudimg.com/raw/2dbc2bd8ca5f1a5af134af37572c0220/mobile.svg`,
    };
  },
  computed: {
    ...mapState({
      characterDesc: (state) => state.config.characterDesc || '',
    }),
  },
};
</script>

<template>
  <div class="dzq-index-section">
    <div class="dzq-index-section__hd">
      <h2 class="dzq-index-section__title"><span>特性</span></h2>
      <p class="dzq-index-section__description">
        {{ characterDesc }}
      </p>
    </div>
    <div class="dzq-index-section__bd">
      <div class="dzq-layout_section-trait">
        <div class="dzq-layout_section-trait-img">
          <img class="dzq-layout_section-trait-img-pc" :src="pc" />
          <img class="dzq-layout_section-trait-img-m" :src="mobile" />
        </div>
      </div>
    </div>
    <div class="dzq-index-section__ft">
      <button class="dzq-btn">
        <a href="/feature" style="color: #fff">了解 Q 的特性</a>
      </button>
    </div>
  </div>
</template>
